<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>logo设计需求问卷</title>
    <link rel="stylesheet" href="../css/inde.css">
    <link href="../css/layer.css" rel="stylesheet">
    <script src="../js/jquery.js"></script>
    <script src="../js/rem.js"></script>
    <script src="../js/layer.js"></script>
    <script type="text/javascript">
    !(function(){
        $.getUrlParam = function (name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
           // var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return decodeURI(r[2]); return null;
        }
    })(jQuery);
    </script>
	<script>
		$(document).ready(function(){
		  layer.msg("Welcome");
		});
	</script>
</head>
<body>
    <div class="box">
        <!--<div class="title">logo设计需求问卷</div>-->
        <div class="content">
            <div class="letter">
                <div class="let-title">来自设计师的一封信</div>
                <p>尊敬的客户：</p>
                <text class="le-text">您好！很高兴能够参与关于您企业/品牌的Logo设计。您可能觉得我可以天马行空，但我也想在起飞前知道我要飞去哪里，所以为了能够在接下来的设计过程中产生更多更好的创意，做出让人满意的Logo，希望您能够抽空，认真仔细的填写一下以下的设计问卷，确保我设计的Logo是您想要的，并且符合您企业/品牌的需求。再次感谢您！受累了！</text>
                <p class="le-last">您的设计师</p>
            </div>
            <div class="from">
                <div class="from-one">
                    <div class="one-title">
                        <div class="tit-le">1</div>
                        Logo设计基本信息<span>*</span>：
                    </div>
                    <div class="one-li">
                        <div class="one-top">Logo名称<span>（Logo中需要体现的名称）</span>：</div>
                        <div class="one-input">
                            <input type="text" class=" name">
                        </div>
                    </div>
                    <div class="one-li">
                        <div class="one-top">Logo英文<span>（不体现英文则不填写）</span>：</div>
                        <div class="one-input">
                            <input type="text" class="english">
                        </div>
                    </div>
                    <div class="one-li">
                        <div class="one-top">Logo所属行业：</div>
                        <div class="one-input">
                            <input type="text" class="industry">
                        </div>
                    </div>
					<div class="one-li">                                        
                        <div class="one-top">联系人：</div>
                        <div class="one-input">
                            <input type="text" class="people">
                        </div>
                    </div>
                    <div class="one-li">
                        <div class="one-top">联系电话：</div>
                        <div class="one-input">
                            <input type="text" class="tel">
                        </div>
                    </div>
                </div>
                <div class="from-two">
                    <div class="two-title">
                        <div class="tit-le">2</div>
                        <div class="tit-ri">
                            您的营业范围简介<span class="tit-on">（请全面介绍您的产品或服务,以帮助我们更清晰的了解您的需求）</span><span>*</span>：
                        </div>
                    </div>
                    <div class="two-input">
                        <textarea rows="3" cols="20" class="range"></textarea>
                    </div>
                </div>
                <div class="from-two">
                    <div class="two-title">
                        <div class="tit-le">3</div>
                        <div class="tit-ri">
                            Logo的名称含义<span class="tit-on">（请尽量详细描述一下为什么要给标志起这个名称,以帮助我们更清晰的了解您的需求）</span>：
                        </div>

                    </div>
                    <div class="two-input">
                    <textarea rows="3" cols="20" class="meaning"></textarea>
                </div>
                </div>
                <div class="from-four">
                    <div class="four-title">
                        <div class="tit-le">4</div>
                        <div class="tit-ri">
                            您更倾向于哪种风格的标志：<input type="text" readonly value=""><span class="tit-on">（点击图片可选择需要的类型）</span><span>*</span>:
                        </div>
                    </div>
                    <div class="four-box">
                        <ul class="four-ul">
                            <li class="four-li" data-id="1">
                                <img class="four-img active" src="../images/four1.jpg" alt="">
                                <img class="four-img1" src="../images/unselect/four1.jpg" alt="">
                            </li>
                            <li class="four-li" data-id="2">
                                <img class="four-img active" src="../images/four2.jpg" alt="">
                                <img class="four-img1" src="../images/unselect/four2.jpg" alt="">
                            </li>
                            <li class="four-li" data-id="3">
                                <img class="four-img active" src="../images/four3.jpg" alt="">
                                <img class="four-img1" src="../images/unselect/four3.jpg" alt="">
                            </li>
                            <li class="four-li" data-id="4">
                                <img class="four-img active" src="../images/four4.jpg" alt="">
                                <img class="four-img1" src="../images/unselect/four4.jpg" alt="">
                            </li>
                            <li class="four-li" data-id="5">
                                <img class="four-img active" src="../images/four5.jpg" alt="">
                                <img class="four-img1" src="../images/unselect/four5.jpg" alt="">
                            </li>
                            <li class="four-li" data-id="6">
                                <img class="four-img active" src="../images/four6.jpg" alt="">
                                <img class="four-img1" src="../images/unselect/four6.jpg" alt="">
                            </li>
                            <li class="four-li" data-id="7">
                                <img class="four-img active" src="../images/four7.jpg" alt="">
                                <img class="four-img1" src="../images/unselect/four7.jpg" alt="">
                            </li>
                            <li class="four-li" data-id="8">
                                <img class="four-img active" src="../images/four8.jpg" alt="">
                                <img class="four-img1" src="../images/unselect/four8.jpg" alt="">
                            </li>
                            <li class="four-li" data-id="9">
                                <img class="four-img active" src="../images/four9.jpg" alt="">
                                <img class="four-img1" src="../images/unselect/four9.jpg" alt="">
                            </li>
                        </ul>
                        <div class="four-gloss">
                            <div class="glo-claim">
                                <div class="cla-title">我有特殊要求：</div>
                                <div class="cla-input">
                                    <textarea rows="3" cols="20" class="style_explain"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="from-five">
                    <div class="five-title">
                        <div class="tit-le">5</div>
                        <div class="tit-ri">
                            您更倾向于标志色彩属于哪一色系：<input type="text" readonly value=""><span class="tit-on">（点击图片可选择需要的类型）</span><span>*</span>:
                        </div>
                    </div>
                    <div class="five-box">
                        <ul class="five-ul">
                            <li class="five-li" data-id="1">
                                <img class="five-img active" src="../images/five1.jpg" alt="">
                                <img class="five-img1" src="../images/unselect/five1.jpg" alt="">
                            </li>
                            <li class="five-li" data-id="2">
                                <img class="five-img active" src="../images/five2.jpg" alt="">
                                <img class="five-img1" src="../images/unselect/five2.jpg" alt="">
                            </li>
                            <li class="five-li" data-id="3">
                                <img class="five-img active" src="../images/five3.jpg" alt="">
                                <img class="five-img1" src="../images/unselect/five3.jpg" alt="">
                            </li>
                            <li class="five-li" data-id="4">
                                <img class="five-img active" src="../images/five4.jpg" alt="">
                                <img class="five-img1" src="../images/unselect/five4.jpg" alt="">
                            </li>
                            <li class="five-li" data-id="5">
                                <img class="five-img active" src="../images/five5.jpg" alt="">
                                <img class="five-img1" src="../images/unselect/five5.jpg" alt="">
                            </li>
                            <li class="five-li" data-id="6">
                                <img class="five-img active" src="../images/five6.jpg" alt="">
                                <img class="five-img1" src="../images/unselect/five6.jpg" alt="">
                            </li>
                            <li class="five-li" data-id="7">
                                <img class="five-img active" src="../images/five7.jpg" alt="">
                                <img class="five-img1" src="../images/unselect/five7.jpg" alt="">
                            </li>
                            <li class="five-li" data-id="8">
                                <img class="five-img active" src="../images/five8.jpg" alt="">
                                <img class="five-img1" src="../images/unselect/five8.jpg" alt="">
                            </li>
                            <li class="five-li" data-id="9">
                                <img class="five-img active" src="../images/five9.jpg" alt="">
                                <img class="five-img1" src="../images/unselect/five9.jpg" alt="">
                            </li>
                            <li class="five-li" data-id="10">
                                <img class="five-img active" src="../images/five10.jpg" alt="">
                                <img class="five-img1" src="../images/unselect/five10.jpg" alt="">
                            </li>
                            <li class="five-li" data-id="11">
                                <img class="five-img active" src="../images/five11.jpg" alt="">
                                <img class="five-img1" src="../images/unselect/five11.jpg" alt="">
                            </li>
                            <li class="five-li" data-id="12">
                                <img class="five-img active" src="../images/five12.jpg" alt="">
                                <img class="five-img1" src="../images/unselect/five12.jpg" alt="">
                            </li>
                        </ul>
                        <div class="five-gloss">
                            <div class="glo-claim">
                                <div class="cla-title">我有特殊要求：</div>
                                <div class="cla-input">
                                    <textarea rows="3" cols="20" class="color_explain"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="from-six">
                    <div class="six-title">
                        <div class="tit-le">6</div>
                        <div class="tit-ri">
                            您认为标志的设计重点在于：<input type="text" readonly value=""><span class="tit-on">（点击图片可选择需要的类型）</span><span>*</span>:
                        </div>
                    </div>
                    <div class="six-box">
                        <div class="six-top">
                            <div class="six-le">A品牌个性</div>
                            <div class="six-le">B行业特征</div>
                        </div>
                        <ul class="six-ul">
                            <li class="six-li" data-id="A">
                                <img class="six-img active" src="../images/six1.jpg" alt="">
                                <img class="six-img1" src="../images/unselect/six1.jpg" alt="">
                            </li>
                            <li class="six-li" data-id="B">
                                <img class="six-img active" src="../images/six2.jpg" alt="">
                                <img class="six-img1" src="../images/unselect/six2.jpg" alt="">
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="from-seven">
                    <div class="sev-title">
                        <div class="tit-le">7</div>
                        <p>您有期望体现在标志设计中的元素或禁止在标志设计中体现的元素：</p>
                    </div>
                    <div class="sev-input">
                        <textarea rows="3" cols="20" class="element"></textarea>
                    </div>
                </div>
                <div class="from-eight">
                    <div class="eight-title">
                        <div class="tit-le">8</div>
                        <p>同行业或其它行业标志中您比较欣赏哪几个标志：</p>
                    </div>
                 <form enctype="multipart/form-data" id="imgss">
                     <input name="Token" type="hidden" id="Token" value="a56f456cc505ccb21675194cf30d94bdfd5f700a:-ZStggmbS8z7JmkNbS9pHfclqcY=:eyJkZWFkbGluZSI6MTU5NDEzOTk3NCwiYWN0aW9uIjoiZ2V0IiwidWlkIjoiNzIyNjc5IiwiYWlkIjoiMTcwMTM1MSIsImZyb20iOiJmaWxlIn0=" />
                    <div class="eight-input">
                        <div class="eig-box choseimg">
                            <div class="eig-a one">
                                +
                                <input type="file" accept="image/png,image/gif,image/jpg,image/jpeg" id="file1">
                                <img src="" style="display: none;" class="eig-img">
                                <div class="dow" style="display: none;">
                                    <img src="../images/dow.png" alt="">
                                </div>
                            </div>
                            <div class="eig-a two">
                                +
                                <input type="file" accept="image/png,image/gif,image/jpg,image/jpeg" id="file2">
                                <img src="" style="display: none;" class="eig-img">
                                <div class="dow" style="display: none;">
                                    <img src="../images/dow.png" alt="">
                                </div>
                            </div>
                            <div class="eig-a three">
                                +
                                <input type="file" accept="image/png,image/gif,image/jpg,image/jpeg" id="file3">
                                <img src="" style="display: none;" class="eig-img">
                                <div class="dow" style="display: none;">
                                    <img src="../images/dow.png" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                 </form>
					 <div class="eight-boxs">
                        <div class="eight-top">标志中文名称：</div>
                        <div class="eig-input">
                            <input type="text" class="appreciate">
                        </div>
                    </div>
					<script>
                    function progressHandlingFunction(e){
                        if(e.lengthComputable){
                            $('progress').attr({value:e.loaded,max:e.total});
                        }
                    }
                    $(".choseimg input").change(function () {
                        var that = $(this);
                        var file = event.target.files[0];
                        const imgMasSize = 1024 * 1024 * 1; // 10MB
                        if(file.size > imgMasSize ) {
                            // 文件大小自定义限制
                            // Toast.error("文件大小不能超过10MB！", 2000, undefined, false);
                            layer.msg('请上传小于1MB的图片')
                            return false;
                        }else {
                            // 组装数据（文件数据，普通数据）
                            var formData = new FormData($('form')[0]);
                            formData.append("file",file);
                            $.ajax({
                                type: 'POST',  //请求类型
                                url: 'http://up.imgapi.com/', //绝对路轻
                                data: formData,  //要发送到服务器的数据。包含file数据
                                xhr: function() {
                                    myXhr = $.ajaxSettings.xhr();
                                    if(myXhr.upload){
                                        myXhr.upload.addEventListener('progress',progressHandlingFunction, false);
                                    }
                                    return myXhr;
                                },
                                success: function(data) {
                                    console.log(data);
                                    if (data.size > 0) {
                                        console.log(data);
                                        that.parents('.eig-a').find('.eig-img').attr('src', data.s_url);
                                        that.parents('.eig-a').find('.eig-img').show();
                                        that.parents('.eig-a').find('.dow').show();
                                    } else {
                                        layer.msg("图片上传失败");
                                    }
                                },
                                cache: false,
                                contentType: false,
                                processData: false
                            });
                            /*$.ajax({
                                type: 'POST',  //请求类型
                                url: 'https://api.wanzu.net/Api/Common/upload', //绝对路轻
                                data: formData,  //要发送到服务器的数据。包含file数据
                                cache: false,  //表示浏览器是否缓存被请求页面。
                                contentType: false,  //发送数据到服务器时所使用的内容类型。
                                processData: false,  //规定通过请求发送的数据是否转换为查询字符串。（重要）
                                xhrFields: {withCredentials: true},  //一对“文件名-文件值”在本机设置XHR对象。例如，用它来设置withCredentials为true的跨域请求。 用户固定PHPSESSID不变
                                success: function(re) {
                                    console.log(re);
                                    if (re.code == 1) {
                                        console.log(re.data.url);
                                        that.parents('.eig-a').find('.eig-img').attr('src', re.data.url);
                                        that.parents('.eig-a').find('.eig-img').show();
                                        that.parents('.eig-a').find('.dow').show();
                                    } else {
                                        layer.msg(re.msg)
                                    }
                                }
                            });*/
                        }
                    });

                    $('.dow').click(function () {
                        var that = $(this);
                        that.parents('.eig-a').find('.eig-img').attr('src', '').hide();
                        that.parents('.eig-a').find('.dow').hide();
                    })
                </script>
                </div>
                <div class="from-btn">提交需求</div>
            </div>
        </div>
    </div>
</body>
</html>
<script>
    $('.four-ul .four-li').click(function () {
        var ca = '';
        if ($('.four-li').eq($(this).index()).hasClass('active')){
            $('.four-li').removeClass('active');
            $('.four-li').children(".four-img1").removeClass('active');
            $('.four-li').children(".four-img").addClass('active');
            $('.four-title input').val('');
            $('.four-gloss').removeClass('active');
        }
        else {
            $('.four-li').eq($(this).index()).addClass('active').siblings().removeClass('active');
            $('.four-li').eq($(this).index()).siblings().children(".four-img").removeClass('active');
            $('.four-li').eq($(this).index()).siblings().children(".four-img1").addClass('active');
            $('.four-li').eq($(this).index()).children(".four-img").addClass('active');
            $('.four-li').eq($(this).index()).children(".four-img1").removeClass('active');
            var va = $(this).attr("data-id");
            $('.four-title input').val(va);
            $('.four-gloss').addClass('active');
        }
        $('.four-gloss .glo-box').html(ca)

    });
  $('.five-ul .five-li').click(function () {
        var ca = '';
        if ($('.five-li').eq($(this).index()).hasClass('active')){
            $('.five-li').removeClass('active');
            $('.five-li').children(".five-img1").removeClass('active');
            $('.five-li').children(".five-img").addClass('active');
            $('.five-title input').val('');
            $('.five-gloss').removeClass('active');
        } else {
            $('.five-li').eq($(this).index()).addClass('active').siblings().removeClass('active');
            $('.five-li').eq($(this).index()).siblings().children(".five-img").removeClass('active');
            $('.five-li').eq($(this).index()).siblings().children(".five-img1").addClass('active');
            $('.five-li').eq($(this).index()).children(".five-img").addClass('active');
            $('.five-li').eq($(this).index()).children(".five-img1").removeClass('active');
            var va = $(this).attr("data-id");
            $('.five-title input').val(va);
            $('.five-gloss').addClass('active');
        }
        $('.five-gloss .glo-box').html(ca)
    });
    $('.six-ul .six-li').click(function () {
        var ca = '';
        if ($('.six-li').eq($(this).index()).hasClass('active')) {
            $('.six-li').removeClass('active');
            $('.six-le').removeClass('active');
            $('.six-li').children(".six-img1").removeClass('active');
            $('.six-li').children(".six-img").addClass('active');
            $('.six-title input').val('');
            $('.six-gloss').removeClass('active');
        }else {
            $('.six-li').eq($(this).index()).addClass('active').siblings().removeClass('active');
            $('.six-le').eq($(this).index()).addClass('active').siblings().removeClass('active');
            $('.six-li').eq($(this).index()).siblings().children(".six-img").removeClass('active');
            $('.six-li').eq($(this).index()).siblings().children(".six-img1").addClass('active');
            $('.six-li').eq($(this).index()).children(".six-img").addClass('active');
            $('.six-li').eq($(this).index()).children(".six-img1").removeClass('active');
            var va = $(this).attr("data-id");
            $('.six-title input').val(va);
            $('.six-gloss').addClass('active');
        }
        $('.six-gloss .glo-box').html(ca)
    });

    $('.from-btn').click(function () {
        var name = $('.name').val(),
            tel = $('.tel').val(),
			contacts = $('.people').val(),
            english = $('.english').val(),
            industry = $('.industry').val(),
            business_scope = $('.range').val(),
            name_meaning = $('.meaning').val(),
            style_images = $('.four-li.active').attr("data-id"),
            style_explain = $('.style_explain').val(),
            color_images = $('.five-li.active').attr("data-id"),
            color_explain = $('.color_explain').val(),
            crux_images = $('.six-li.active').attr("data-id"),
            element = $('.element').val(),
			appreciate = $('.appreciate').val(),
            appreciate_image = '';
            $(".choseimg .eig-img").each(function () {
                var src = $(this).attr("src");
                if ($(this).attr("src") != "") {
                    appreciate_image = appreciate_image == '' ? src : appreciate_image+","+src;
                }
            });
            var str = /^1[23456789]\d{9}$/;
            if (name != '' && tel != '' && industry != '' && business_scope != ''&& style_images != undefined && color_images != undefined && crux_images != undefined) {
                if (!str.test(tel)) {
                        layer.msg('请输入正确的手机号码')
                    }else {
                        $.ajax({
                            type:'POST',
                            url:'/quesPhone/insertInfo.do',
                            datatype:"json",
                            data:{
                                logeNameCN:name,
                                phone:tel,
                                linkman:contacts,
                                logeNameEN:english,
                                trade:industry,
                                brief:business_scope,
                                mean:name_meaning,
                                imgFlag:style_images,
                                imgFlagASK:style_explain,
                                imgFlagCol:color_images,
                                imgFlagColASK:color_explain,
                                wantType:crux_images,
                                comm1:element,
                                imgNameCN:appreciate,
                                comm2:appreciate_image,
                                comm6:1
                            },
                            success:function (res) {
                                if (res.state == 1){
                                    layer.msg(res.msg)
                                    setTimeout(function(){
                                        window.location.reload();//刷新当前页面.
                                    },2000)
                                }else {
                                    layer.msg(res.msg)
                                }
                            }
                        })
                    }

            }else {
                layer.msg('请填写所有必填内容')
            }
    })
</script>
